<template>
  <view class="tab-bar">
    <view v-for="(item, index) in list" :key="index" class="tab-bar-item" @click="switchTab(item, index)">
      <image class="tab_img" :src="selected === index ? item.selectedIconPath : item.iconPath"></image>
      <view class="tab_text" :style="{ color: selected === index ? selectedColor : color }">{{ item.text }}</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    selected: {
      // 当前选中的tab index
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      color: '#999999',
      selectedColor: '#333333',
      userIdentity: null,
      list: [],
      B: [
        {
          pagePath: '/pages/index/index',
          text: '首页',
          iconPath: '/static/kx_home.png',
          selectedIconPath: '/static/kx_home_fill.png',
        },

        {
          pagePath: '/pages/message/index',
          text: '商城',
          iconPath: '/static/kx_shop.png',
          selectedIconPath: '/static/kx_shop_fill.png',
        },
        {
          pagePath: '/pages/life/index',
          text: '收益',
          iconPath: '/static/kx_income.png',
          selectedIconPath: '/static/kx_income_fill.png',
        },
        {
          pagePath: '/pages/me/index',
          text: '我的',
          iconPath: '/static/kx_user.png',
          selectedIconPath: '/static/kx_user_fill.png',
        },
      ],
      C: [
        {
          pagePath: '/pages/index/index',
          text: '首页',
          iconPath: '/static/kx_home.png',
          selectedIconPath: '/static/kx_home_fill.png',
        },
        {
          pagePath: '/pages/message/index',
          text: '社群',
          iconPath: '/static/kx_message.png',
          selectedIconPath: '/static/kx_message_fill.png',
        },
        {
          pagePath: '/pages/life/index',
          text: '生活',
          iconPath: '/static/kx_life.png',
          selectedIconPath: '/static/kx_life_fill.png',
        },
        {
          pagePath: '/pages/me/index',
          text: '我的',
          iconPath: '/static/kx_user.png',
          selectedIconPath: '/static/kx_user_fill.png',
        },
      ],
    }
  },
  created() {
    if (uni.getStorageSync('pageIndex')) {
      this.userIdentity = uni.getStorageSync('pageIndex')
      if (this.userIdentity == 2) {
        this.list = this.B
      } else {
        this.list = this.C
      }
    } else {
      this.userIdentity = 1
      this.list = this.C
    }
  },

  methods: {
    switchTab(item, index) {
      let url = item.pagePath
      uni.switchTab({
        url,
      })
    },
  },
}
</script>

<style lang="scss">
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 120rpx;
  background: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: calc(env(safe-area-inset-bottom) / 2); // 适配iphoneX的底部
  z-index: 9999;

  .tab-bar-item {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .tab_img {
      width: 37rpx;
      height: 41rpx;
    }

    .tab_text {
      font-size: 20rpx;
      margin-top: 9rpx;
    }
  }
}
</style>
